<template>
  <div>
    <el-table :data="tableData" style="width: 100%" border :row-class-name="tableRowClassName">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="title" label="问题标题" width="400">
      </el-table-column>
      <el-table-column prop="keyword" label="关键词" width="400">
      </el-table-column>
      <el-table-column prop="hotIndex" label="热度/万" width="100">
      </el-table-column>
      <el-table-column prop="insertTime" label="时间" width="180">
      </el-table-column>
      <el-table-column label="详情" width="120">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="showContent(scope.row)"
          >查看内容
          </el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="小时增长量" width="100">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="showData(scope.row)"
          >查看
          </el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="今日关注量" width="100">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="today(scope.row)"
          >查看
          </el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="是否异常" width="100">
        <template slot-scope="scope">
          <label v-if="scope.row.isUnusual">是</label>
          <label v-else>否</label>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="内容"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <span>{{ currentMessage }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
        >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>

// 设置饼图
import * as echarts from "echarts";

export default {
  data() {
    return {
      dialogVisible: false,
      currentMessage: "",
      tableData: []
    }
  },
  methods: {
    // 查看内容
    showContent(row) {
      this.dialogVisible = true;
      this.currentMessage = row.excerpt;
    },
    // 查看小时数据
    showData(row) {
      this.$router.push({path: "/panelGroup", query: {id: row.infoId}}).catch(err => {
        err;
      });
    },
    // 今日变化量
    today(row) {
      this.$router.push({path: "/today", query: {id: row.infoId}}).catch(err => {
        err;
      });
    },
    // 发送请求，从后台获取数据
    sendRequest() {
      this.$http("/hot-info/first?count=10&currentDate=" + this.$store.state.currentDate).then((response) => {
        if (response.data.code !== 0) {
          this.$message.error(response.data.msg);
          return;
        }
        this.$store.commit('changeAllData', response.data.data);
        this.loadTable(this.$store.state.allData);
      });
    },
    loadTable(dataList) {
      this.tableData = dataList;
    },
    tableRowClassName({row, rowIndex}) {
      if(row.isUnusual) {
        return 'warning-row';
      }
      return '';
    }
  },
  mounted() {
    this.sendRequest();
  }
}

</script>
<style>
.el-table .warning-row {
  background: #fde9e6;
}
</style>
